<template>
    <div>
        <van-search v-model="keyword"
                    placeholder="点此搜索"
                    shape="round"
                    disabled
                    @click="$router.push('/searchPopup')"/>
        <div class="tag">
            <van-sidebar v-model="activeKey">
                <van-sidebar-item
                    v-for="(item, index) in categoryList"
                    :key="index"
                    :title="item.name"
                    @click="changeCurrentPage(item.id)"
                />
            </van-sidebar>
            <!--导航展示-->
            <div class="tagShow">
                <div class="imgBox">
                    <img width="95%" height="140px" :src="currentCategory.banner_url"/>
                    <h5>{{ currentCategory.front_name }}</h5>
                </div>

                <!--      分页 符-->
                <van-divider :style="{
          color:'#000',
          borderColor:'#c05a5a',
          padding:'0 100px 0 100px',
          fontSize:'20px',
        }">{{ currentCategory.name }}
                </van-divider>

                <!--      宫格-->
                <van-grid column-num="3">
                    <van-grid-item v-for="(item,index) in currentCategory.subCategoryList" :key="index"
                                   :icon="item.wap_banner_url" :text="item.name"/>
                </van-grid>
            </div>
        </div>

    </div>


</template>
<script>
import {getCategoryAll, getCategoryOnePage} from "@/api/home";

export default {
    name: "Apps",
    data() {
        return {
            keyword: "",
            activeKey: 0,
            categoryList: {},
            currentCategory: {},
        }
    },
    methods: {
        async changeCurrentPage(id) {
            let {data} = await getCategoryOnePage({id: id});
            this.currentCategory = data.currentCategory;
        }
    },
    mounted() {
        getCategoryAll().then(({data}) => {
            this.categoryList = data.categoryList;
            this.currentCategory = data.currentCategory;
        })
    }
}
</script>

<style scoped lang="less">
.tag {
    display: flex;

    .tagShow {
        width: 100%;
    }

    .imgBox {
        margin: 10px 0 0 13px;
        position: relative;
        top: 0;
        left: 0;

        img {
            border-radius: 5%;
            box-shadow: 0 0 6px #000;
            filter: brightness(0.5);
        }

        h5 {
            position: absolute;
            top: 40%;
            left: 30%;
            color: #ffffff;
        }
    }
}


</style>
